<template>
  <div class="ident_detail">
    <head-top head-title="业主认证" go-back="true"></head-top>
    <ul>
      <li class="ident_li border-bottom">
        <span>所在小区：</span>
        <span>{{list.areas_name}}</span>
      </li>
      <li class="ident_li border-bottom">
        <span>我的房号：</span>
        <span>{{list.content}}</span>
      </li>
    </ul>
    <h3>相关证明展示</h3>
    <des-ident-pic :list="list.img_url"></des-ident-pic>
    <div v-if="flag&&list.status===3" class="error_msg">
      <p>未通过原因：</p>
      <p>{{list.message}}</p>
    </div>
    <div v-if="flag&&list.status!==2" class="delete_Btn">
      <button @click="deleteBtn(list.id)">
        <span>删除</span>
      </button>
    </div>
  </div>
</template>
<style lang="scss">
  .ident_detail {
    width: 100%;
    padding-top: 40px;
    ul {
      .ident_li {
        margin: 0 10px;
        font-size: 16px;
        height: 48px;
        line-height: 48px;
        position: relative;
        span:last-child {
          color: #393939;
        }
      }
    }
    h3 {
      font-size: 15px;
      padding: 20px 10px 10px 10px;
      font-weight: normal;
    }
    .error_msg {
      width: 100%;
      p:first-child {
        font-size: 16px;
        padding: 10px;
        color: #ff4443;
      }
      p:last-child {
        font-size: 14px;
        padding: 5px 10px 10px 10px;
        color: #393939;
        line-height: 20px;
      }
    }
    .delete_Btn {
      width: 100%;
      text-align: center;
      margin-top: 20px;
      padding-bottom: 20px;
      button {
        width: 90%;
        background: #ff4443;
        outline: none;
        span {
          line-height: 44px;
          font-size: 15px;
          color: #fff;
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import desIdentPic from '../common/desIdentPic'
  import { Toast } from 'mint-ui'
  import { getidentDetail, deleteOne } from '../../api/MyIdent'

  export default {
    data () {
      return {
        list: {},
        flag: false
      }
    },
    created () {
      this._getIdentDetail()
    },
    methods: {
      _getIdentDetail () {
        getidentDetail(this.$route.params.id).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.list = res.data
            this.flag = true
            // console.log(this.list)
          }
        })
      },
      deleteBtn (id) {
        deleteOne(id).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Toast({
              message: res.data,
              position: 'middle',
              duration: 2000
            })
            this.$router.back()
          }
          if (res.code === 400) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 2000
            })
          }
        })
      }
    },
    components: {
      headTop,
      desIdentPic
    }
  }
</script>
